import {UserOutlined, DownOutlined} from '@ant-design/icons'
import {Dropdown, Menu, Avatar, Select} from 'antd'
import React, {memo, useEffect, useState} from 'react'
import {connect, useModel} from 'umi'
import type {MenuProps} from 'antd'
import styles from './styles/index.less'
import {getList} from '@/service/system/company'
import {IconFont} from '@/utils/common/tool'

import IconComp from '@/components/Icon/Icon'

const menu = (
	<Menu
		items={[
			// {
			//   key: '1',
			//   label: '主题切换',
			// },
			{
				key: '1',
				label: '退出登录',
			},
		]}
	/>
)

export interface HeaderProps {
	user: any
	dispatch: any
}

const Header = memo(({dispatch, user}: HeaderProps) => {
	const {initialState, setInitialState} = useModel('@@initialState')
	const {headerMenuKey} = initialState || {}
	const [selectData, setDataSource] = useState<any[]>([])
	const [id, setIdSource] = useState('')
	const [items, setItems] = useState<any>([])
	const [current, setCurrent] = useState<any>()

	const selectHeaderMenu = (key: any) => {
		setCurrent(() => key)
	}
	useEffect(() => {
		const menus: any = user?.menuTree?.map(
			(item: {
				name: string
				id: number
				menuType: number
				icon: string
			}) => {
				if (item?.menuType !== 0) {
					return false
				}
				return {
					label: item.name,
					icon: item.icon.includes('-dd-') ? (
						<IconFont type={item.icon} />
					) : (
						<IconComp icon={item.icon} />
					),
					key: item.name,
				}
			},
		)
		selectHeaderMenu(headerMenuKey || menus[0]?.key)
		setItems(menus)
	}, [user.menuTree])

	// 菜单单击事件
	const onClick: MenuProps['onClick'] = (e) => {
		dispatch({
			type: 'user/updateSelectHeaderMenu',
			payload: {headerMenuKey: e.key},
		})
		setInitialState((initialStateData: any) => ({
			...initialStateData,
			headerMenuKey: e.key,
		}))
		setCurrent(e.key)
		selectHeaderMenu(e.key)
	}

	// 获取表格数据
	const onAllCompany = () => {
		getList().then((res: any) => {
			if (res?.success) {
				setDataSource(res?.data)
				setIdSource(res?.data[0]?.id)
				dispatch({
					type: 'user/updateOrgId',
					payload: {
						orgId: res?.data[0]?.id,
					},
				})
			}
		})
	}
	//
	const onChange = (value: string) => {
		setIdSource(value)
		dispatch({
			type: 'user/updateOrgId',
			payload: {
				orgId: value,
			},
		})
		dispatch({
			type: 'user/updateCurrentMerchantId',
			payload: {
				currentMerchantId: value,
			},
		})
	}
	useEffect(() => {
		// 初始化公司列表
		onAllCompany()
	}, [])
	const onSearch = () => {}

	return (
		<div className={styles.header}>
			<div className="menu-left">
				<Menu
					theme="light"
					mode="horizontal"
					onClick={onClick}
					selectedKeys={[current]}
					items={items}
				/>
			</div>
			<div className="menu-right">
				<Select
					className="search"
					showSearch
					placeholder="切换公司"
					optionFilterProp="children"
					onChange={onChange}
					onSearch={onSearch}
					filterOption={(input, option) =>
						(option?.label ?? '')
							.toLowerCase()
							.includes(input.toLowerCase())
					}
					options={selectData}
					value={id}
					fieldNames={{
						label: 'name',
						value: 'id',
					}}
				/>
				<IconFont type="icon-dd-message" className="message" />
				<Avatar
					style={{backgroundColor: '#87d068'}}
					icon={<UserOutlined />}
					size={26}
				/>
				<div className="user">{user?.userName}</div>
				<div className="select">
					<Dropdown overlay={menu}>
						<DownOutlined />
					</Dropdown>
				</div>
			</div>
		</div>
	)
})
export default connect(({global, user}: any) => ({global, user}))(Header)
